import { t } from 'i18next'
import { CommonMessage, SmsModal, SpaceWrapper, Wrap } from './style'
import { TextArea, Button, Modal, TriggerInstance } from '@kedacom/react-next'
import React, { useRef, useState } from 'react'
import { Trigger } from '@kedacom/react-next'
import { IconAddSms, IconEdit, IconBigUrlMcc, IconDrop } from '../../../components/Icons/style'
import { useData } from './hooks'

export const Text = () => {
	const {
		smsText,
		smsList,
		updateTextArea,
		stopMessage,
		sendMessage,
		addCommonUseSms,
		updateSingleMsg,
		clearAllMsg,
		closeEdit,
		deleteMsg,
		insertMsg,
	} = useData()
	const triggerRef = useRef<TriggerInstance>()
	const [showSetMsgModal, setShowSetMsgModal] = useState(false)
	return (
		<Wrap>
			<div>
				<TextArea
					maxLength={256}
					placeholder={t('请输入短消息')}
					resize="none"
					value={smsText.smsTextArea}
					onChange={(e, v) => {
						updateTextArea({ smsTextArea: v })
					}}
					height={100}
					width={266}
				/>
			</div>
			<div className="buttonList">
				<SpaceWrapper>
					<Trigger
						trigger={['click']}
						ref={triggerRef}
						popup={
							<CommonMessage
								onClick={() => {
									triggerRef.current?.close()
								}}
							>
								<div className="message-list">
									<ul>
										{smsList.map((x) => (
											<li
												key={x.id}
												title={x.msg}
												onClick={() => {
													updateTextArea({ smsTextArea: x.msg })
												}}
											>
												{x.msg}
											</li>
										))}
									</ul>
								</div>
								<div
									className="setCommonMsg"
									onClick={() => {
										setShowSetMsgModal(true)
									}}
								>
									{t('设置常用短消息')}
								</div>
							</CommonMessage>
						}
						preventOverflow
						popupAlign={{
							points: ['bl', 'tl'],
							offset: [0, 3],
						}}
					>
						<Button width={200} className="smsBtn">
							{t('常用短消息')}
							<IconDrop className="sms-btn-icon__i18n" />
						</Button>
					</Trigger>
					<Button className="sms-btn__i18n" onClick={stopMessage}>
						{t('停止')}
					</Button>
					<Button className="sms-btn__i18n" onClick={sendMessage}>
						{t('发送')}
					</Button>
				</SpaceWrapper>
			</div>
			<Modal
				open={showSetMsgModal}
				title={t('设置常用短消息')}
				onCancel={() => setShowSetMsgModal(false)}
				cancelText={t('关闭')}
				okText={false}
				height={518}
				width={714}
			>
				<SmsModal>
					<div className="content">
						<div className="sms-wrap">
							<TextArea
								maxLength={256}
								placeholder={t('请输入短消息')}
								resize="none"
								value={smsText.smsTextAreaModal}
								height={107}
								width={580}
								className="sms-edit-add"
								onChange={(e, v) => {
									updateTextArea({ smsTextAreaModal: v })
								}}
							/>
							<IconAddSms className="add" onClick={addCommonUseSms} />
						</div>
						<div className="sms-wrap sms-list-tip">
							<div>{t('常用短消息列表')}</div>
							<div className="clear" onClick={clearAllMsg}>
								{t('清空')}
							</div>
						</div>
						<div className="separator"></div>
						<div className="sms-content">
							<ul>
								{smsList.map((x, index) => (
									<React.Fragment key={index}>
										<li key={x.id + index} title={x.msg} className="sms-li">
											<span className="ellipsis">{x.msg}</span>
											<IconEdit
												className="remove"
												onClick={(e) => {
													deleteMsg(x.id, e)
												}}
											/>
											<IconEdit
												className="edit"
												onClick={(e) => {
													insertMsg(x, e)
												}}
											/>
										</li>
										{x.isShowEdit && (
											<div className="sms-edit">
												<TextArea
													maxLength={256}
													placeholder=""
													resize="none"
													value={smsText.smsTextAreaModalEdit}
													height={95}
													width={546}
													className="sms-edit-add"
													onChange={(e, v) => {
														updateTextArea({ smsTextAreaModalEdit: v })
													}}
												/>
												<div className="operates">
													<IconBigUrlMcc
														className="bg_url_mcc submit"
														onClick={() => {
															updateSingleMsg(x.id, smsText.smsTextAreaModalEdit)
														}}
													/>
													<IconBigUrlMcc className="bg_url_mcc close" onClick={closeEdit} />
												</div>
											</div>
										)}
									</React.Fragment>
								))}
							</ul>
						</div>
						<div className="separator"></div>
					</div>
				</SmsModal>
			</Modal>
		</Wrap>
	)
}
